---
import { faThreads, faXTwitter } from "@fortawesome/free-brands-svg-icons";
import FontAwesomeIcon from "./FontAwesomeIcon.astro";
import Logo from "./Logo.astro";
---

<footer class="border-t py-12 print:hidden">
  <div class="max-w-384 mx-auto px-4 md:px-8">
    <div class="text-center flex flex-col gap-8 md:flex-row md:text-start">
      <div class="space-y-4 md:max-w-sm">
        <div class="inline-flex items-center space-x-2">
          <Logo width={150} height={45} />
        </div>
        <p class="text-sm text-muted-foreground">
          Fast, modern, and easily configurable web server with automatic TLS.
        </p>
        <div class="inline-flex space-x-3">
          <a
            href="https://x.com/ferron_web"
            class="text-muted-foreground hover:text-primary transition-colors"
          >
            <span class="sr-only">X</span>
            <FontAwesomeIcon icon={faXTwitter} class="!h-6 w-6" />
          </a>
          <a
            href="https://www.threads.com/@ferronweb"
            class="text-muted-foreground hover:text-primary transition-colors"
          >
            <span class="sr-only">Threads</span>
            <FontAwesomeIcon icon={faThreads} class="!h-6 w-6" />
          </a>
        </div>
      </div>
      <div class="grow flex flex-col justify-end md:flex-row gap-8">
        <div class="space-y-4 lg:min-w-44 xl:min-w-52">
          <span class="block font-medium text-xl md:text-2xl">Quick links</span>
          <ul class="space-y-1 text-sm md:text-base">
            <li>
              <a
                href="/"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Home</a
              >
            </li>
            <li>
              <a
                href="/download"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Download</a
              >
            </li>
            <li>
              <a
                href="/support"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Support</a
              >
            </li>
            <li>
              <a
                href="/blog"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Blog</a
              >
            </li>
          </ul>
        </div>
        <div class="space-y-4 lg:min-w-44 xl:min-w-52">
          <span class="block font-medium text-xl md:text-2xl">Resources</span>
          <ul class="space-y-1 text-sm md:text-base">
            <li>
              <a
                href="/docs"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Documentation</a
              >
            </li>
            <li>
              <a
                href="/changelog"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Change log</a
              >
            </li>
            <li>
              <a
                href="https://github.com/ferronweb/ferron"
                class="text-muted-foreground hover:text-primary transition-colors"
                >GitHub repository</a
              >
            </li>
            <li>
              <a
                href="/contribute"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Contribute</a
              >
            </li>
            <li>
              <a
                href="/vulnerabilities"
                class="text-muted-foreground hover:text-primary transition-colors"
                >Vulnerabilities</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="mt-8 border-t pt-8 flex flex-col md:flex-row justify-between items-center"
    >
      <p class="text-muted-foreground text-sm mb-4 md:mb-0">
        &copy; 2025 Ferron. All rights reserved.
      </p>
      <p class="text-muted-foreground text-sm">
        <a
          href="/tos"
          class="text-primary font-medium transition-all underline-offset-4 hover:underline"
        >
          Terms of Service
        </a>
        | <a
          href="/privacy"
          class="text-primary font-medium transition-all underline-offset-4 hover:underline"
        >
          Privacy Policy
        </a>
      </p>
    </div>
  </div>
</footer>
